<template>
  <view>
		<view class="navBox">
			<view style="background-image: linear-gradient(180deg, #c9ceff 0%, #fdf4ff 100%);">
				<topStatus></topStatus>
				<view class="tabsBack">
					<view @click="goBack()" class="blackbox">
						<uni-icons type="left" size="24" color="#111"></uni-icons>
					</view>
					<view class="topTitle hiddenText">兴趣圈子</view>
					<view style="opacity: 0;" class="blackbox">
						<uni-icons type="left" size="24" color="#ebebea"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="fix">
			  <view class="topBox">
			    <view class="topScreenBox">
			      <view class="searchCell">
			        <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719815210371515.png" class="searchimg">
			        </image>
			        <view class="scInp">
			          <input type="text" v-model="searchContent" placeholder="请输入圈子名称" maxlength="10"
			            placeholder-class="placname" @input="blurSearch" />
			        </view>
			      </view>
			      <view class="scBtnBox">
			        <view class="scSumBtn" @click="subSearch">搜索</view>
			      </view>
			    </view>
			  </view>
			  <!-- <view class="navbox">
			    <view class="navtext" :class="{ 'text4': navindex == index }" v-for="(item, index) in navlist" :key="index"
			      @click="navswitch(index)">
			      {{ item }}
			      <view v-if="navindex == index" class="aft4"></view>
			    </view>
			  </view> -->
			</view>
		</view>
		<view class="load" v-if="!loading">
		  <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			
			<block v-if="navindex == 0">
			  <view class="actconBoxList">
					<block v-if="teamlist.length">
						<block v-for="(item, index) in teamlist" :key="index">
							<ActivityCell :item="item"></ActivityCell>
						</block>					
					</block>
					<view v-else>
						<u-empty
							mode="list"
							width="64"
							height="64"
							icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png"
							:show="true"
							iconSize="32"
							text="这里什么都没有..."
						></u-empty>
					</view>
			  </view>
			</block>
			<block v-if="navindex == 1">
			  <view class="cirlistbox"> 
					<view class="hot_body" v-if="teamlist.length && isShowTop">
						<view class="hot_titbox">
							人气TOP10
						</view>
						<view class="hot_content">
							
							<block v-for="(item,index) in teamlist" :key="index">
								<view class="hot_cell" :class="TopColor[getTopColor(index)]" v-if="index<10" @click.stop="nav_to('/pages/together/cirDetail?id='+item.ID)">
									<view class="hot_icon">
										<image :src="item.Logo" mode="aspectFill"></image>
									</view>
									<view class="hot_name">
										{{item.TeamName}}
									</view>
								</view>
							</block>
							
						</view>
					</view>
					<view class="activity_body" v-if="teamlist.length">
						<view class="activity_tab">
							<view class="tab_cell tab_active">
								综合
							</view>
						</view>
						<view class="activity_content">
							<view v-for="(item,index) in teamlist" :key="index" @click.stop="nav_to('/pages/together/cirDetail?id='+item.ID)">
								<view class="activity_cell" :style="{backgroundImage: `url(${item.Logo})`}">
									<!-- <view class="activity_tag activity_tag_colorPink">人气Top3</view> -->
									<view class="activity_img">
										<image :src="item.Logo" mode="aspectFill"></image>
									</view>
									<view class="activity_container">
										<view class="activity_titbox">
											<view class="titlebox_tit">
												{{item.TeamName?$util.entitiesToUtf16(item.TeamName):'' }}
											</view>
											<view class="titbox_btn" v-if="item.IsJoin==0" @click.stop="JoinTeam(item,item.ID,index)">
												加入
											</view>
										</view>
										<view class="activity_litbox">
											{{ item.Tips? $util.entitiesToUtf16(item.Tips):'' }}
										</view>
										<view class="activity_foot">
											<view class="foot_time">
												
											</view>
											<view class="foot_body">
												<view class="foot_cell">
													<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1736757969842533.png" mode="heightFix"></image>
													<view class="foot_tit">
														{{item.HotValue}}
													</view>
												</view>
												<view class="foot_cell">
													<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1736921335578218.png" mode="heightFix"></image>
													<view class="foot_tit">
														{{item.BrowserNum}}
													</view>
												</view>
												<view class="foot_cell">
													<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1736921349943972.png" mode="heightFix"></image>
													<view class="foot_tit">
														{{item.MemberNum}}
													</view>
												</view>
											</view>
										</view>
									</view>
									
									<view class="activity_bg" :class="ActivityColor[getActivityColor(index)]"></view>
								</view>
							</view>
							
						</view>
					</view>
					<view v-else>
						<u-empty
							mode="list"
							width="64"
							height="64"
							icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png"
							:show="true"
							iconSize="32"
							text="这里什么都没有..."
						></u-empty>
					</view>
					
					<block v-if="false">
						<block v-if="teamlist.length">
							<view class="cirlist" v-for="(item, index) in teamlist" :key="index"
							        :style="'background-image: url(' + (item.Logo?item.Logo:'') + ');background-size: cover;background-repeat:no-repeat;'" @click.stop="nav_to('/pages/together/cirDetail?id='+item.ID)">
							        <view class="cirinfobox">
							          <image class="hdimg" :src="item.Logo?item.Logo:''" mode="aspectFill"></image>
							          <view class="cirinfo">
							            <view class="cirname">{{ item.TeamName?$util.entitiesToUtf16(item.TeamName):'' }}</view>
							            <view class="cirrem hiddenText">{{ item.Tips? $util.entitiesToUtf16(item.Tips):'' }}</view>
							          </view>
							          <view class="cirjoin" v-if="item.IsJoin == 0">
							            <image class="joinimg" v-if="item.IsJoinFee==0" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
							            </image>
													<!-- <text v-else>
														{{user.Sex=='男'?'￥'+item.Men_Fee:'￥'+item.Women_Fee}}
													</text> -->
							            <view class="jointext" @click.stop="JoinTeam(item,item.ID,index)">加入</view>
							          </view>
							          <!-- <view class="cirquit" v-else @click.stop="quitTeam(item,index)">
							            <view class="jointext">退出</view>
							          </view> -->
							        </view>
							        <view class="databox">
							          <view class="datatltie">
							            <view class="datanum">{{ item.HotValue }}</view>
							            <view class="datatext">人气值</view>
							          </view>
							          <view class="datatltie">
							            <view class="datanum">{{ item.BrowserNum }}</view>
							            <view class="datatext">浏览</view>
							          </view>
							          <view class="datatltie">
							            <view class="datanum">{{ item.MemberNum }}</view>
							            <view class="datatext">成员</view>
							          </view>
							        </view>
							
							        <view class="blackshadow"></view>
							</view>
						</block>
						
						<view v-else>
							<u-empty
								mode="list"
								width="64"
								height="64"
								icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png"
								:show="true"
								iconSize="32"
								text="这里什么都没有..."
							></u-empty>
						</view>
					</block>
					
			  </view>
			  
			</block>
		</block>
    

  </view>
</template>

<script>
import ActivityCell from "./components/ActivityCell/ActivityCell.vue";
export default {
  components: {
    ActivityCell
  },
  data() {
    return {
      searchContent:'',
      teamlist: [],
      navlist: ['活动', '圈子'],
      navindex: 1,
      PageIndex: 1,
      PageSize: 10,
      longitude: null,
      latitude: null,
      isMore:false,
      user:{},
      huiNum:1,//加入圈子所需积分
			teamObj:{},
			loading:false,
			
			TopColor:['hot_color1','hot_color2','hot_color3','hot_color4','hot_color5'],
			ActivityColor:['activity_color1','activity_color2','activity_color3','activity_color4','activity_color5'],
			isShowTop:true
    };
  },
  async onLoad() {
    await this.getCity();
    // this.getteam()
    this.user = uni.getStorageSync("user");
		await this.getUserInfo()
    this.navswitch(this.navindex)
  },
  //下拉刷新
  onPullDownRefresh(){
    this.PageIndex = 1
    // this.teamlist  = []
    if(this.navindex == 0){
      this.getActList()
    }else{
        this.getteam()
				this.$pv.msg('刷新成功')
    }
    uni.stopPullDownRefresh()
  },
  // 触底事件
  onReachBottom() {
    if(this.isMore){
      if(this.navindex == 0){
        this.PageIndex++
        this.getActList()
      }else{
          this.PageIndex++
          this.getteam()
      }
    }
  },
	computed:{
		getTopColor(){
			return (index)=>{
				let size = this.TopColor.length
				
				if(index >= size){
					return index % size
				}
				return index
			}
		},
		getActivityColor(){
			return (index)=>{
				let size = this.ActivityColor.length
				
				if(index >= size){
					return index % size
				}
				return index
			}
		}
	},
  methods: {
		goBack() {
		    const pages = getCurrentPages();
		    if (pages.length > 1) {
		        // 如果页面栈长度大于1，则说明有上一页，可以返回
		        uni.navigateBack();
		    } else {
		        // 如果没有上一页，则导航到首页
		        uni.reLaunch({
		            url: '/pages/tab/home'
		        });
		    }
		},
		async getUserInfo() {
			let u = uni.getStorageSync('user');
			let res = await this.$api.post('User/GetUserInfo', {
				ID: u.UserID,
			});
		
			this.user = res.data;
			uni.setStorageSync('user', this.user);
		
			this.$store.commit('setUser', this.user);
		
		},
		async getJoinTeam(ID){
			let res = await this.$api.post('Team/JoinTeam',{
				ID
			})
			this.teamObj = res.data
		},
    // 获取加入圈子需要多少积分
    async getJoinNum(){
      let res = await this.$api.post("Common/GetServerPrice", {
        Item:'加入圈子'
      })
      if (res.code == 0) {
        this.huiNum = res.data.Score || 0
      }
    },
    // 点击搜索
    subSearch() {
      if(this.navindex == 0){
        this.PageIndex == 1
        this.getActList()
      }else{
        this.PageIndex == 1  
        this.getteam()
      }
			if(!this.searchContent){
				this.isShowTop =  true
			}else{
				this.isShowTop =  false
			}
    },
    //空白搜索
    blurSearch() {
      console.log(1111);
      if (this.searchContent == '') {
        this.PageIndex == 1
        if(this.navindex == 0){
        this.getActList()
        }else{ 
					console.log(2222);
          this.getteam()
        }
				this.isShowTop =  true
      }

    },
    //退出圈子
    quitTeam(item,index){
      let _this = this;
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
        return
      }
      if (item.IsTeamAdmin == 1) {
        _this.$pv.msg("圈主无法退出");
        return
      }
      uni.showModal({
          title: "温馨提示",
          content: "您确定要退出该圈子吗？",
          confirmText: "确定",
          success: async function (res) {
            if (res.confirm) {
              let res1 = await _this.$api.post("Team/Quit", {
                TeamID: item.ID
              })
              if (res1.data) {
                _this.$pv.msg("退出成功");
                _this.teamlist[index].IsJoin = 0
              } else {
                _this.$pv.msg(res1.message);
              }
            } else if (res.cancel) {
            }
          },
        });
    },
    //加入圈子
    async JoinTeam(item,id,index){
			console.log('=》》》》',item);
			let isAudit = item.IsAuditMember
      let _this = this
			let tips = this.user.Sex=='男' ? '￥'+item.Men_Fee : '￥'+item.Women_Fee 
      if(this.user.IsAuth == 0){
           uni.showModal({
              title: "温馨提示",
              content: "您还未注册，请先注册",
              confirmText: "确定",
              success: function (res) {
                if (res.confirm) {
                  _this.nav_to("/pages/start/start2");
                } else if (res.cancel) {
                }
              },
            });
      }else if(item.IsJoinFee==1){
				uni.showModal({
				   title: "加入圈子",
				   content: "加入圈子费用为"+tips,
				   confirmText: "确定",
				   success: function (res) {
				     if (res.confirm) {
				       _this.nav_to("/pages/start/start2");
				     } else if (res.cancel) {
				     }
				   },
				 });
				await this.getJoinTeam(id)
				let pres = await this.$api.post("Payment/PayV2", {
				  ...this.teamObj,
					SourcePage:'',
				  // #ifdef MP-WEIXIN
				  PayChannel: "weixin",
				  // #endif
				  // #ifdef APP
				  PayChannel: "app",
				  // #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
				  // isPay = true;
				} else {
				  // 支付成功返回的内容
				  let payObj = JSON.parse(pres.data);
				  let _this = this;
				  // 调用uni支付API
				  uni.requestPayment({
				    // 服务提供商
				    provider: "wxpay",
				    // #ifdef APP
				    orderInfo: payObj,
				    // #endif
				    // #ifdef MP-WEIXIN
				    timeStamp: payObj.timeStamp,
				    nonceStr: payObj.nonceStr,
				    package: payObj.package,
				    signType: payObj.signType,
				    paySign: payObj.paySign,
				    // #endif
				    success(res) {
							_this.$pv.msg('加入成功');
				      _this.navswitch(_this.navindex)
				    },
				    fail(err) {
				      _this.$pv.msg("已取消支付");
				    },
				  });
				}
			}else{
        uni.showModal({
              title: "温馨提示",
              content: `您确定要加入该圈子吗？`,
              confirmText: "确定",
              success: async function (res) {
                if (res.confirm) {
                  let res1 = await _this.$api.post("Team/JoinTeam",{
                      ID:id
                  })
                  if(res1.data){
										if(res1.message=='success'){
											_this.$pv.msg(isAudit ? '加入成功，请等待审核~' : '加入成功');
										}else{
											_this.$pv.msg(res1.message || '加入成功，请等待审核~');
										}
                    // _this.teamlist[index].IsJoin = 1
                  }else{
                    _this.$pv.msg(res1.message);
                  }
									_this.navswitch(_this.navindex)
                } else if (res.cancel) {
                }
              },
            }); 
      }
    },
    // 获取圈子列表
    async getteam() {
      let res = await this.$api.post("Team/PageList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        TeamName: this.searchContent,
        LeaderID:this.user.UserID
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.isMore =
              Array.isArray(res.data) && res.data.length >= this.PageSize;
				this.loading = true
      }


    },
    // 获取一起挥列表
    async getActList() {
      let res = await this.$api.post("Appointment/PageList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        Appointment: '一起挥',
        User_Lng: this.longitude,
        User_Lat: this.latitude,
        Title:this.searchContent
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.isMore =
              Array.isArray(res.data) && res.data.length >= this.PageSize;
      }

    },
    //列表切换
    navswitch(index) {
      this.navindex = index
      this.PageIndex = 1
      // this.teamlist  = []
      if (index == 0) {
        this.getActList()
      } else if (index == 1) {
        this.getteam()
      }
    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    // 获取当前地址并解析
    async getCity() {
      let loc = await this.getLocationSysc();

      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
    },
  },
}
</script>
<style lang='scss'>
page {
  background-color: #fef4ff;
}
.navBox {
	position: sticky;
	width: 100%;
	box-sizing: border-box;
	top: 0;
	left: 0;
	z-index: 999;
	.tabsBack {
		height: 44px;
		display: flex;
		align-items: center;
		padding: 0 14rpx;
		justify-content: space-between;
		/* .blackbox {
			background-color: rgba(0, 0, 0, 0.3);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			margin-top: -6rpx;
		} */
		.topTitle {
			width: 350rpx;
			color: #111;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			overflow: hidden; /*超出部分隐藏*/
			white-space: nowrap; /*禁止换行*/
			text-overflow: ellipsis; /*省略号*/
		}
	}
}
.actconBoxList {
  width: 100%;
  padding: 40rpx 20rpx;
  margin-top: 200rpx;
}

.cirlistbox{
  /* margin-top: 180rpx; */
  padding-bottom: 40rpx;
  .hot_body{
    
    padding: 24rpx 0;
		padding-bottom: 37rpx;
    .hot_titbox{
      font-size: 28rpx;
      font-weight: 700;
      margin-left: 30rpx;
    }
    .hot_content{
      padding-top: 60rpx;
      display: flex;
      align-items: center;
      overflow-x: scroll;
      .hot_cell{
        width: 124rpx;
        min-width: 124rpx;
        /* height: calc(124rpx + 33rpx); */
				height: 124rpx;
        border-radius: 16rpx;
        margin-right: 30rpx;
       
        &:first-child{
          margin-left: 30rpx;
        }
        .hot_icon{
          width: 66rpx;
          height: 66rpx;
          border-radius: 50%;
          overflow: hidden;
          border: 2rpx solid #eee;
          margin: 0 auto;
          margin-top: -33rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .hot_name{
          margin: 18rpx 16rpx;
          font-size: 22rpx;
					font-weight: 700;
          color: #fff;
          text-align: center;
          -webkit-line-clamp: 2;
          /* 显示几行 */;
          display: -webkit-box;
          /* 弹性伸缩盒子 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .hot_color1{
        background-image: linear-gradient(180deg,#7B5AD7 0%,#B9A7F9 100%);
      }
      .hot_color2{
        background-image: linear-gradient(180deg,#0FABCC 0%,#54D2D5 100%);
      }
      .hot_color3{
        background-image: linear-gradient(180deg,#77C029 0%,#E5E063 100%);
      }
      .hot_color4{
        background-image: linear-gradient(180deg,#D942A2 0%,#E97FC2 100%);
      }
      .hot_color5{
        background-image: linear-gradient(180deg,#ED7044 0%,#E8C872 100%);
      }
    }
    
  }

  .activity_body{
    padding: 0 30rpx;
    .activity_tab{
      display: flex;
      align-items: center;
      margin-bottom: 43rpx;
      .tab_cell{
        font-size: 28rpx;
        color: #999;
        margin-right: 44rpx;
      }
      .tab_active{
        font-size: 30rpx;
        color: #000000;
        font-weight: bold;
      }
    }
    .activity_content{
      image{
        width: 100%;
        height: 100%;
      }
      .activity_cell{
        padding: 30rpx;
        border-radius: 20rpx;
        display: flex;
        /* align-items: center; */
        justify-content: space-between;
        /* background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1733376228518796.jpg'); */
        background-size: cover;
        position: relative;
				z-index: 9;
				margin-bottom: 24rpx;
				
				.activity_tag{
					padding: 6rpx 14rpx;
					border-radius: 24rpx 0 24rpx 0;
					font-size: 22rpx;
					font-weight: bold;
					color: #fff;
					position: absolute;
					top: -16rpx;
					left: 0;
				}
				.activity_tag_colorPink{
					background-image: linear-gradient(90deg,#D942A2 0%,#E97FC2 100%);
				}
				.activity_tag_colorOrange{
					background-image: linear-gradient(90deg,#ED7044 0%,#E8C872 100%);
				}
        .activity_img{
          width: 110rpx;
          height: 110rpx;
          border-radius: 50%;
          overflow: hidden;
          border: 2rpx solid #fff;
          margin-right: 24rpx;
        }
        .activity_container{
          flex: 1;
          .activity_titbox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .titlebox_tit{
              font-size: 30rpx;
              font-weight: 700;
              color: #fff;
            }
            .titbox_btn{
              width: 106rpx;
              height: 48rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 24rpx;
              font-size: 22rpx;
							font-weight: 900;
							background-color: #fff;
            }
          }
          .activity_litbox{
            margin: 16rpx 0;
						margin-top: 12rpx;
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.6);
            width: 50vw;
            overflow: hidden;  /*超出部分隐藏*/
            white-space: nowrap;  /*禁止换行*/
            text-overflow: ellipsis; /*省略号*/

          }
          .activity_foot{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .foot_time{
              font-size: 20rpx;
              color: #ccc;
            }
            .foot_body{
              display: flex;
              align-items: center;
              .foot_cell{
                display: flex;
                align-items: center;
                margin-right: 30rpx;
                &:last-child{
                  margin-right: 0;
                }
                image{
                  width: 20rpx;
                  height: 24rpx;
                  margin-right: 6rpx;
                }
                .foot_tit{
                  font-size: 24rpx;
                  font-weight: bold;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
    .activity_bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(10px);
			border-radius: 20rpx;
			z-index: -1;
    }
    .activity_color1{
      background: rgba(49,66,244, 0.7);
			.titbox_btn{
				color: rgba(49,66,244, 0.7) !important;
			}
    }
		.activity_color2{
		  background: rgba(0,149,181, 0.7);
			.titbox_btn{
				color: rgba(0,149,181, 0.7) !important;
			}
		}
		.activity_color3{
		  background: rgba(73,141,0, 0.7);
			.titbox_btn{
				color: rgba(73,141,0, 0.7) !important;
			}
		}
		.activity_color4{
		  background: rgba(162,96,226, 0.7);
			.titbox_btn{
				color: rgba(162,96,226, 0.7) !important;
			}
		}
		.activity_color5{
		  background: rgba(255,152,167, 0.7);
			.titbox_btn{
				color: rgba(255,152,167, 0.7) !important;
			}
		}
  }
}
.cirlist {
  width: 702rpx;
  // height: 548rpx;
  border-radius: 24rpx;
  padding: 36rpx 32rpx;
  // background-color: #9796ed;
  margin: 0 auto;
  margin-top: 24rpx;
  position: relative;

  .blackshadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 702rpx;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }

  .cirinfobox {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    position: relative;
    z-index: 10;

    .hdimg {
      width: 100rpx;
      height: 100rpx;
      border-radius:50%;
			box-sizing: border-box;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 400rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirjoin {
      min-width: 110rpx;
      height: 56rpx;
      background: #6C6AFF;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
    .cirquit{
      width: 110rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;
      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }
      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .databox {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;

    .datatltie {
      margin-right: 56rpx;
      text-align: center;
      .datanum {
        font-size: 36rpx;
        font-weight: bold;
        color: #EFEFEF;
      }

      .datatext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }
  }
}

.fix {
  /* position: fixed; */
  background-color: #fef4ff;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
  padding-top: 28rpx;

  .endimg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    z-index: 1000;
    right: 150rpx;
    bottom: 28rpx;
  }

  .navbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;

    .navtext {
      width: calc(100% / 2);
      height: 100%;
      font-size: 28rpx;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

    }

    .text4 {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;

      .aft4 {
        width: 40rpx;
        height: 8rpx;
        background: #000000;
        border-radius: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.topBox {
  width: 100%;
  padding: 0 30rpx;
	padding-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .topFastBtn {
    padding: 13rpx 24rpx;
    background: #000000;
    border-radius: 32rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 24rpx;
      height: 24rpx;
    }

    .topFastText {
      font-size: 24rpx;
      color: #ffffff;
    }

    .topFastNum {
      position: absolute;
      top: -16rpx;
      right: -10rpx;
      width: 40rpx;
      background-color: red;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      font-size: 20rpx;
    }
  }
}


.topScreenBox {
  width: 100%;
  display: flex;
  align-items: center;

  .searchCell {
    width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 9rpx 10rpx;
    .scIcon {
      margin-right: 16rpx;
    }

    .searchimg {
      width: 32rpx;
      height: 32rpx;
      margin-left: 12rpx;
    }

    .scInp {
      flex: 1;
      margin-left: 8rpx;

      >input {
        width: 100%;
        background: transparent;
      }

      .placname {
        color: #999999;
        font-size: 24rpx;
      }
    }

  }

  .scBtnBox {
    display: flex;
    /* margin-right: 8rpx; */
  
    .scSumBtn {
			width: 140rpx;
			    height: 56rpx;
			    min-width: 140rpx;
			    max-width: 140rpx;
			    min-height: 56rpx;
			    max-height: 56rpx;
    	background-image: linear-gradient(90deg, #a160e2 0%, #3241f4 100%);
      border-radius: 28rpx;
      font-weight: 700;
      font-size: 24rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    
      &:last-child {
        margin-left: 20rpx;
      }
    }
  }

  .tagBox {
    width: 100%;
    // overflow-y: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .tagCell {
        padding: 10rpx 20rpx;
        border-radius: 12rpx;
        border: 2rpx solid #000000;
        background: white;
        color: #000000;
        margin: 0 20rpx 10rpx;
        margin-left: 0;
        white-space: nowrap;
        font-size: 22rpx;
      }

      .tagIng {
        border: 2rpx solid #000000;
        background: #000000;
        color: white;
      }
    }
  }
}
input, .input-placeholder, .textarea-placeholder, textarea {
    font-size: 24rpx;
}
</style>